function build_vul(data, id) {
  //漏洞类型饼图
  var myChart = echarts.init(document.getElementById(id))
  option = {
    title: {
      text: '漏洞类型分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: '70%', //图例距离左的距离
      y: 'center', //图例上下居中
    },
    series: [
      {
        name: '漏洞类型',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        center: ['35%', '50%'], //图的位置，距离左跟上的位置
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold',
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  }

  myChart.setOption(option)
}

function build_pro(data, all, id) {
  //产品统计(Top10) all 为总计多少个
  var myChart = echarts.init(document.getElementById(id))
  // prettier-ignore
  const builderJson = {
    all: all,
    charts: data
  };
  const waterMarkText = 'ECHARTS'
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.width = canvas.height = 100
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.globalAlpha = 0.08
  ctx.font = '20px Microsoft Yahei'
  ctx.translate(50, 50)
  // ctx.rotate(-Math.PI / 4)
  // ctx.fillText(waterMarkText, 0, 0)
  option = {
    backgroundColor: {
      type: 'pattern',
      image: canvas,
      repeat: 'repeat',
    },
    tooltip: {},
    title: [
      {
        text: '产品统计(TOP10)',
        subtext: '总计 ' + builderJson.all,
        left: 'center',
      },
    ],
    grid: [
      {
        top: 50,
        width: '90%',
        bottom: '10%',
        left: 'center',
        containLabel: true,
      },
    ],
    xAxis: [
      {
        type: 'value',
        max: 5000,
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'category',
        data: Object.keys(builderJson.charts),
        axisLabel: {
          interval: 0,
          rotate: 30,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
          position: 'right',
          show: true,
        },
        data: Object.keys(builderJson.charts).map(function (key) {
          return builderJson.charts[key]
        }),
      },
    ],
  }

  myChart.setOption(option)
}

function build_haz(name_arr, data_arr, id) {
  //漏洞等级趋势
  var myChart = echarts.init(document.getElementById(id))
  option = {
    title: {
      text: '漏洞等级',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: name_arr,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '端口数量',
        type: 'bar',
        barWidth: '60%',
        data: data_arr,
        itemStyle: {
          color: 'pink',
        },
      },
    ],
  }

  myChart.setOption(option)
  return myChart
}

function getLevelOption() {
  return [
    {
      itemStyle: {
        borderColor: '#777',
        borderWidth: 0,
        gapWidth: 1,
      },
      upperLabel: {
        show: false,
      },
    },
    {
      itemStyle: {
        borderColor: '#555',
        borderWidth: 5,
        gapWidth: 1,
      },
      emphasis: {
        itemStyle: {
          borderColor: '#ddd',
        },
      },
    },
    {
      colorSaturation: [0.35, 0.5],
      itemStyle: {
        borderWidth: 5,
        gapWidth: 1,
        borderColorSaturation: 0.6,
      },
    },
  ]
}

function build_ven(data, id) {
  var myChart = echarts.init(document.getElementById(id))
  option = {
    title: {
      text: '厂商统计',
      left: 'center',
    },
    series: [
      {
        name: 'Infomation',
        type: 'treemap',
        data: data,
        itemStyle: {
          borderColor: '#fff',
        },
        levels: getLevelOption(),
      },
    ],
  }

  myChart.setOption(option)
}

function build_tre(data, id) {
  var chartDom = document.getElementById(id)
  var myChart = echarts.init(chartDom)
  var option

  // prettier-ignore

  const dateList = data.map(function (item) {
    return item[0]
  })
  const valueList = data.map(function (item) {
    return item[1]
  })
  option = {
    // Make gradient line here
    visualMap: [
      {
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400,
      },
    ],
    title: [
      {
        left: 'center',
        text: '发现趋势',
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        data: dateList,
      },
    ],
    yAxis: [{}],
    series: [
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
      },
    ],
  }

  option && myChart.setOption(option)
}

function build_pre_text(id) {
  var divs = document.getElementById(id)
  var myChart = echarts.init(divs)
  option = {
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: 'Mapping Cyberspace',
            fontSize: 80,
            fontWeight: 'bold',
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: 'transparent',
            stroke: '#000',
            lineWidth: 1,
          },
          keyframeAnimation: {
            duration: 5000,
            loop: false,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: 'transparent',
                  lineDashOffset: 200,
                  lineDash: [200, 0],
                },
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: 'transparent',
                },
              },
              {
                percent: 1,
                style: {
                  fill: '#ffcc99',
                },
              },
            ],
          },
        },
      ],
    },
  }
  myChart.setOption(option)
  return myChart
}

function build_pre_loading(id) {
  var divs = document.getElementById(id)
  var myChart = echarts.init(divs)
  option = {
    graphic: {
      elements: [
        {
          type: 'group',
          left: 'center',
          top: 'center',
          children: new Array(7).fill(0).map((val, i) => ({
            type: 'rect',
            x: i * 20,
            shape: {
              x: 0,
              y: -40,
              width: 10,
              height: 80,
            },
            style: {
              fill: '#5470c6',
            },
            keyframeAnimation: {
              duration: 1000,
              delay: i * 200,
              loop: true,
              keyframes: [
                {
                  percent: 0.5,
                  scaleY: 0.3,
                  easing: 'cubicIn',
                },
                {
                  percent: 1,
                  scaleY: 1,
                  easing: 'cubicOut',
                },
              ],
            },
          })),
        },
      ],
    },
  }
  myChart.setOption(option)
  return myChart
}

function bulid_pre_struct() {
  $('#render').removeClass('render')
  $('#footer').addClass('footer')
  $('#banner').addClass('banner')
  $('#tab').addClass('tab')
  for (var i = 1; i <= 2; i++) {
    $('#line-content-' + i).addClass('line-content-' + i)
  }

  $.ajax({
    url: '/api/json/container.json',
    success: function (data) {
      for (var i = 0; i < 2; i++) $('#line-content-1').append(data[i].div)
      for (var i = 2; i < data.length; i++)
        $('#line-content-2').append(data[i].div)
    },
    dataType: 'json',
  })
}
